<template>
<div class="recharge-records">
  <div class="head">
    <div :class="{active:isRecharge}" @click="topChanger(1)">充值记录</div>
    <div :class="{active:!isRecharge}" @click="topChanger(0)">乘车记录</div>
  </div>
  <!-- 列表开始 -->
  <div class="content" :class="{'no-content-list': isEmpty}">
    <div class="items">
      <!-- 充值开始 -->
      <template v-if="isRecharge">
        <template v-if="recordList.length">
          <router-link class="item" tag="a" :to="{name: 'rechargeDetails', query: { orderNo: item.orderNo }}"
                       v-for="(item,index) in recordList" :key="index">
            <div class="item-value" style="width: 120px">{{item.createTime ? item.createTime.split('T')[0].replace(/-/g, '.') : ''}}</div>
            <div class="item-value gray">充值</div>
            <div class="item-value" style="width: 120px; text-align: right">￥{{item.price}}<span class="item-value-right"><i
              class="iconfont">&#xe651;</i></span></div>
          </router-link>
        </template>
        <no-data v-else msg="暂无充值记录"></no-data>
      </template>
      <!-- 充值结束 -->

      <!-- 消费开始 -->
      <template v-else>
        <template v-if="consumeList.length">
          <router-link class="item" tag="a" :to="{name: 'paymentDetails', params: {info: item}}"
                       v-for="(item,index) in consumeList" :key="index">
            <div class="item-value">{{item.debitTime ? item.debitTime.split(' ')[0].replace(/-/g, '.') : ''}}</div>
            <div class="item-value">￥{{item.dealMoney}}<span class="item-value-right"><i
              class="iconfont">&#xe651;</i></span></div>
          </router-link>
        </template>
        <no-data v-else msg="暂无乘车记录"></no-data>
      </template>
      <!-- 支付结束 -->
    </div>
    <!-- 列表结束 -->
  </div>
</div>
</template>
<!-- 充值记录页面 -->
<script>
  import NoData from '../../components/no-data';
  export default {
    name: 'rechargeRecords',
    components: {
      NoData
    },
    data () {
      return {
        // 是否是充值列表 1 充值 0 支付
        isRecharge: 1,
        // 判断是否是空数据，调试接口时可以删除
        isEmpty: false,
        recordList: [],
        consumeList: []

      }
    },
    mounted () {
      this.$load.show({
        mask: true
      })
      this.consumeRecord();
      this.getRecordList()
      console.log(this.recordList)
    },
    methods: {
      getRecordList () {
        this.$http.get('/api/qrCode/getOrderRecordList').then(res => {
          if (res.status === 200) {
            this.recordList = res.data;
          }
          this.$load.hide()
        })
      },
      consumeRecord () {
        this.$load.show({
          mask: true
        })
        this.$http.get('/api/qrCode/consumeRecord').then(res => {
          console.log(res)
          this.$load.hide()
          if (res.status === 200) {
            this.consumeList = res.data;
          }
        })
      },
      topChanger (value) {
        this.isRecharge = value
        // 以下代码为调试代码，为展示空数据时的效果，调试接口时请删除
        /*
        if (value) {
          this.isEmpty = false
        } else {
          this.isEmpty = true
        }
        */
      }
    },
    filters: {
      payTypeFormat (value) {
        if (value === '0101') {
          return '银行卡支付';
        }
        if (value === '0102') {
          return '微信支付';
        }
        if (value === '0103') {
          return '支付宝支付';
        }
        return '--'
      },
      dateFormat (value) {
        let date = new Date(value);
        return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
      }
    }
  }
</script>

<style scoped lang="scss">
  .recharge-records {
    height: 100%;
    overflow-y: scroll;
    background: $theme-page-bg;
    display: flex;
    flex-direction: column;

    .head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(167, 174, 188, 1);
      line-height: 25px;
      background: $theme-white;
      margin-bottom: 8px;
      padding-top: 16px;
      padding-bottom: 2px;
      text-align: center;

      .active {
        font-weight: bold;
        position: relative;
        font-family: PingFangSC-Semibold;
        color: $theme-black;

        &:after {
          content: "";
          width: 32px;
          height: 2px;
          background: $theme-blue;
          position: absolute;
          bottom: -2px;
          left: 42%;
        }
      }
    }

    .no-content-list {
      background: $theme-white;

      .items {
        &-date {
          border-bottom: 0 !important;
        }
      }
    }

    .content {
      flex: 1;
      background: $theme-white;

      .items {
        padding-left: 16px;

        .item {
          display: flex;
          justify-content: space-between;
          padding: 16px 16px 16px 0;
          align-items: center;
          border-bottom: 1px solid $theme-border-color;

          &-value {
            font-size: 14px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: $theme-black;

            &-right {
              i {
                color: $theme-gray;
                font-size: 18px;
                margin-left: 8px;
              }
            }
          }

          .gray {
            color: $theme-gray;
          }
        }

        .item:last-child {
          border-bottom: 0;
        }
      }

      .no-data {
        margin-top: 80px;
      }
    }
  }
</style>
